<template>
  <view class="mes-box">
    <!-- 消息展示区域 -->
    <view class="messages-container">
      <view v-for="(message, index) in messages" :key="index" class="message-item" :class="{ 'self-message': message.isSelf }">
        <img :src="message.avatar" alt="Avatar" class="avatar">
        <view class="message-content">
          <view class="user-info" :class="{ 'self-user-info': message.isSelf }">
            <span class="nickname">{{ message.nickname }}</span>
            <span class="level">Lv.{{ message.level }}</span>
            <!-- 替换为性别图片 -->
            <img :src="getGenderImage(message.gender)" alt="Gender" class="gender-image">
          </view>
          <view class="chat-bubble">
            {{ message.content }}
          </view>
        </view>
      </view>
    </view>
    <!-- 消息输入框和发送按钮 -->
    <view class="input-container">
      <input v-model="newMessage" placeholder="输入消息" class="message-input" />
      <view @click="sendMessage" class="send-button">发送</view>
    </view>
  </view>
</template>

<script>
export default {
  name: "WorldChatBox",
  data() {
    return {
      messages: [
        {
          isSelf: false,
          avatar: "https://picsum.photos/30/30",
          nickname: "成都龙泉龙傲天",
          level: 10,
          gender: "男",
          content: "你好啊！"
        },
        {
          isSelf: true,
          avatar: "https://picsum.photos/30/30",
          nickname: "李四",
          level: 12,
          gender: "女",
          content: "你好呀，今天过得怎么样？"
        }
      ],
      newMessage: "",
	  clientObj:client
    };
  },
  mounted(){
	  this.initSocket();
  },
  methods: {
	initSocket(){
		console.log("初始化成功");
		//订阅消息
		this.clientObj.subscribe("/wujiao/chat",(msg)=>{
			console.log("收到消息",msg);
		});
	},
    sendMessage() {
      if (this.newMessage.trim()) {
        let json={
          isSelf: true,
          avatar: "https://picsum.photos/30/30",
          nickname: "李四",
          level: 12,
          gender: "女",
          content: this.newMessage
        };
		//发送消息
		client.send("/app/chat",{},JSON.stringify(json));
		
		
        this.newMessage = "";
      }
    },
    getGenderImage(gender) {
      if (gender === "男") {
        return "https://img.icons8.com/color/48/000000/male.png";
      } else if (gender === "女") {
        return "https://img.icons8.com/color/48/000000/female.png";
      }
      return "";
    }
  }
};
</script>

<style scoped>
.mes-box {
  width: 220px;
  height: 260px;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5); /* 更暗黑的背景色 */
  color: #fff;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  position: relative;
}

.messages-container {
  flex: 1;
  overflow-y: auto;
  /* 隐藏滚动条 */
  -ms-overflow-style: none; /* IE 和 Edge */
  scrollbar-width: none; /* Firefox */
}

/* 隐藏 Chrome、Safari 和 Opera 的滚动条 */
.messages-container::-webkit-scrollbar {
  display: none;
}

.message-item {
  display: flex;
  margin-bottom: 8px;
  align-items: flex-start;
}

.self-message {
  flex-direction: row-reverse;
}

.avatar {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  margin: 0 6px;
}

.message-content {
  max-width: 70%;
}

.user-info {
  display: flex;
  align-items: center;
  font-size: 9px;
  color: #ccc;
}

.self-user-info {
  justify-content: flex-end;
}

.nickname {
  font-weight: bold;
  margin-right: 4px;
  /* 让昵称不影响气泡宽度 */
  word-break: break-all; 
}

.level {
  margin-right: 4px;
}

.gender-image {
  width: 12px;
  height: 12px;
  margin-left: 4px;
}

.chat-bubble {
  background-color: rgba(52, 152, 219, 0.8); /* 半透明背景色 */
  color: white;
  padding: 4px 8px;
  border-radius: 6px;
  position: relative;
  margin-top: 2px;
  font-size: 10px;
  word-break: break-word; /* 添加此样式让中英文正常换行 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
}

.self-message .chat-bubble {
  background-color: rgba(46, 204, 113, 0.8); /* 半透明背景色 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
}

.input-container {
  display: flex;
  margin-top: 4px;
}

.message-input {
  flex: 1;
  padding: 2px 4px;
  border: none;
  border-radius: 3px;
  margin-right: 4px;
  font-size: 10px;
}

.send-button {
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 10px;
  cursor: pointer;
}

.send-button:hover {
  background-color: #2980b9;
}
</style>    